<template>
  <div class="article">
    <!-- 头部筛选 -->
    <el-card>
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <el-form label-width="100px">
        <el-form-item label="状态 :">
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道 :">
          <channelSelect :form="form"></channelSelect>
          <!-- <el-select placeholder="请选择" v-model="form.channel_id">
            <el-option
              v-for="item in channelsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="日期 :">
          <el-date-picker
            v-model="form.picker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 筛选结果 -->
    <el-card class="cardList">
      <!-- header部分需要有显示具名的slot (#header)  分发  同时也是可选的  -->
      <template #header
        >根据筛选条件共查询到 {{ list.length }} 条结果
      </template>
      <!-- :data 要显示的数据 -->
      <el-table :data="list" style="width:100%">
        <el-table-column label="封面">
          <!-- 自定义列的内容，参数为 scope -->
          <template v-slot="scope">
            <img class="cover" :src="scope.row.cover.images[0]" alt="" />
          </template>
        </el-table-column>
        <!-- prop对应列内容的字段名，也可以使用 property 属性 -->
        <el-table-column label="标题" prop="title"> </el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            <!-- <el-button @click="nashuju(scope)">按钮</el-button> -->
            <el-button type="success" plain>{{
              scope.row.status === 2 ? '审核通过' : '审核不通过'
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit(scope.row)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <!-- total 总条数 -->
      <el-pagination
        :total="total"
        :page-size="form.pre_page"
        :page-sizes="[1, 10, 20, 30, 40]"
        :current-page="form.page"
        layout="total,sizes,prev,pager,next,jumper"
        @current-change="pageChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { channels, mpArticles, mpArticlesDelete } from '@/api/index.js'
export default {
  data () {
    return {
      form: {
        picker: [],
        status: '', // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
        channel_id: '', // 不传为全部
        begin_pubdate: '', // 否起始时间
        end_pubdate: '', // 否截止时间
        page: 1, // 页码 默认为1页
        per_page: 10 // 每页数量 不传为默认10
      },
      total: 0,
      channelsList: [],
      list: []
    }
  },
  watch: {
    'form.picker': {
      handler (newVal, oldVal) {
        // console.log('newVal', newVal)
        if ((newVal, length === 2)) {
          this.form.begin_pubdate = newVal[0]
          this.form.end_pubdate = newVal[1]
        }
      }
    }
  },
  async created () {
    const res = await channels()
    this.channelsList = res.data.channels
    this.getDate()
    // console.log('res', res)
  },
  methods: {
    async getDate () {
      const res = await mpArticles(this.form)
      this.list = res.data.results
      this.total = res.data.total_count
      console.log('reslist', res)
    },
    // 筛选按钮 点击筛选按钮回到第一页
    async submit () {
      this.form.page = 1
      this.getDate()
    },
    // nashuju (scope) {
    //   console.log(scope)
    // }
    // 页码修改
    pageChange (page) {
      // this.form.page = 1
      this.form.page = page
      this.getDate()
    },
    sizeChange (size) {
      this.form.per_page = size
      this.form.page = 1
      this.getDate()
    },
    // 删除按钮
    del (row) {
      console.log('id', row.id)
      this.$confirm('您确定要删除该篇文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          await mpArticlesDelete(row.id)
          this.submit()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功!'
          })
        })
    },
    // 编辑按钮
    edit (row) {
      this.$router.push('/publish?id=' + row.id)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-date-editor .el-range-separator {
  width: 30%;
}
.cover {
  width: 100px;
}
.cardList {
  margin-top: 15px;
}
</style>
